/* 星充APP common style */
.sc-container
  position relative
  width 100%
  height 100%
  background-color #f7f7f7

/* button */
.sc-btn-gp
  display flex
  width 100%
  justify-content center
  align-items center
  padding rpx(80) 0
.sc-sub-btn
  width rpx(670)
  height rpx(100)
  background linear-gradient(to right, #ffa03b, #f97624);
  border-radius rpx(100)
  color #fff
  font-size rpx(36)
  margin 0 auto
  box-shadow 0 rpx(4) rpx(8) rgba(0, 0, 0, 0.2)

.flex-end
  display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box; /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox; /* 混合版本语法: IE 10 */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  -webkit-box-pack: end;
  -moz-justify-content: flex-end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
.flex-center
  display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box; /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox; /* 混合版本语法: IE 10 */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  -webkit-box-pack: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
.flex-start
  display flex
  display -moz-box
  justify-content start
  align-items start
.flex-between
  display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box; /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox; /* 混合版本语法: IE 10 */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  -webkit-box-pack: justify;
  -moz-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
.flex-column-between
  display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box; /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox; /* 混合版本语法: IE 10 */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -moz-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
.flex-column-center
  display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box; /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox; /* 混合版本语法: IE 10 */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
.flex-column-top
  display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
  display: -moz-box; /* 老版本语法: Firefox (buggy) */
  display: -ms-flexbox; /* 混合版本语法: IE 10 */
  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -moz-justify-content: flex-start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
.rule-wrap
  width rpx(552)
  height rpx(832)
  background-color #543ad0
  border-radius rpx(10)
  box-shadow 0 0 rpx(4) rgba(0,0,0,0.3)
  animation jackInTheBox 500ms
  & h3
    width 100%
    height rpx(292)
    background url("assets/img/ruleTitle.png") no-repeat rpx(24) rpx(60);
    background-size 80% 80%
    position relative
    .close-btn
      display block
      position absolute
      width rpx(68)
      height rpx(68)
      right rpx(26)
      top rpx(26)
      background url("assets/img/close.png") no-repeat
      background-size 100% 100%
      cursor pointer
  & section
    font-size rpx(24)
    box-sizing border-box
    width 100%
    height rpx(540)
    padding rpx(0) rpx(30) rpx(30) rpx(30)
    overflow hidden
    position relative
    .scrollwrap
      width rpx(492)
      left rpx(30)
      height rpx(510)
      & p
        display block
        overflow hidden
        white-space pre-wrap
        line-height rpx(48)
        text-align justify

  @keyframes jackInTheBox {
    from {
      opacity: 0;
      transform: scale(0.1) rotate(30deg);
      transform-origin: center bottom;
    }
    50% {
      transform: rotate(-10deg);
    }
    70% {
      transform: rotate(3deg);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
.box-shadow
  box-shadow: 3px 3px 6px rgba(0,0,0,0.5);
  z-index 999
.time-line
  background-color #654ed5
  height rpx(140)
  color #ffffff
  padding rpx(94) rpx(60) 0
  position relative
  .text
    font-size $fontsize-small
    position absolute;
    right 0;
    top rpx(-75)
    padding rpx(10) 0
    transform translateX(50%);
    white-space nowrap
  img
    width rpx(90)
    position absolute;
    right 0;
    top rpx(-36)
    transform translateX(50%);
    z-index 100
  .car-icon
    width rpx(75)
    top rpx(-22)
    right rpx(-32)
  .line
    height rpx(8)
    background-color #a421ff
    border-radius 8px
    position relative
    box-shadow: 1px 3px 9px 0 rgba(49, 10, 108, 0.5)
    &:after
      content ''
      height rpx(22);
      width rpx(22);
      display inline-block;
      background #fff;
      border-radius 100%;
      border rpx(6) solid #a421ff;
      position absolute;
      right rpx(-17);
      top 50%;
      transform translate(0,-50%);
      z-index 99
    &:last-child
      &:after
        height 0
        width 0
        border none
    .over
      font-size $fontsize-small-s
      display: inline-block;
      background: #fe7136;
      padding: rpx(8) rpx(16);
      border-radius: 14px;
      position absolute;
      right 0;
      top rpx(-16)
      transform translateX(50%);
      z-index 100
    .wait
      background: #473695;
    .animate-pos
      right rpx(-48)
    .animate-fire
      right rpx(-18)
    .text-828
      display inline-block;
      padding rpx(8) rpx(28);
      background #fff45c;
      border-radius 16px;
      color #543ad0;
      font-weight bold;
      font-size $fontsize-lm;
      top rpx(-75)
      img
        width rpx(36)
        position absolute
        top rpx(-16)
    .yaobai
      transform rotate(15deg)
      transition 0.6s
      transform-origin center center

.hiddenLine
  display none
.red
  color: #ff0000
.green
  color: #009944
.blue
  color: #0083ab
.skyBlue
  color: #00a7ea
.orange
  color: #f97624
.blue-bg
  background #0083ab
.orange-bg
  background: #f97624
.font-48
  font-size $fontsize-large-xxxx
.font-40
  font-size $fontsize-large-xxx
.font-32
  font-size $fontsize-large
.pad40
  padding-top rpx(80)
.h328
  height rpx(248)
